<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>听写程序</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            width: 95%;
            margin: auto;
            overflow: hidden;
        }

        #controls {
            margin-bottom: 20px;
        }

        #result {
            white-space: pre-wrap;
        }

        .container {
            overflow: hidden; /* 清除浮动 */
        }

        .left, .right {
            width: 48%; /* 设置宽度 */
            float: left; /* 左浮动 */
            margin-right: 2%; /* 右边距 */
        }

        .right {
            margin-right: 0; /* 取消最后一个的右边距 */
        }
    </style>
</head>
<body>
<div class="container">
    <div id="controls">
        <div>
            <label for="repeat">每词重复次数:</label>
            <input type="number" id="repeat" value="3">
        </div>
        <div>
            <label for="sleep">间隔时间(秒):</label>
            <input type="number" id="sleep" value="5">
        </div>
        <div>
            <label for="textno">请选择课文</label>
            <select name="textno" id="textno">
            </select>
        </div>
    </div>
    <div class="container">
        <div class="left">
            <label for="content">待听写内容:</label>
            <textarea id="content" rows="20" style="width: 100%;">
店(商店)(店面)(店员)
决(决定)(决心)(坚决)
定(一定)(立定)(安定)
商(商品)(商量)(商人)
夫(工夫)(夫人)(农夫)
终(终于)(最终)(终点)
完(完成)(完美)(完工)
换(交换)(对换)(变换)
期(星期)(日期)(期望)
围巾</textarea>
        </div>
        <div class="right">
            <label>听写结果:</label>
            <div id="result"></div>
        </div>
    </div>
    <div>
        <button id="startBtn">开始听写</button>
        <button id="pauseBtn" disabled>暂停</button>
        <button id="resumeBtn" disabled>继续</button>
        <button id="stopBtn" disabled>停止</button>
    </div>

</div>
<script >
    // <script src="script.js">
    if ('speechSynthesis' in window) {
        // Web Speech API supported
    } else {
        alert("您的浏览器不支持Web Speech API。");
    }
    let ALLTEXT={
        '课文1《古诗二首》':`诗(古诗)(诗歌)(诗句)
童(儿童)(童话)(童年)
妆(化妆)(红妆)(淡妆)
丝(雨丝)(丝瓜)(丝带)
趁(趁机)(趁早)(趁势)
碧(碧绿)(碧玉)(碧空)
绿(绿油油)(绿叶)(绿化)
剪(剪刀)(剪纸)(剪彩)`,
        '课文2《找春天》':`冲(冲动)(冲破)(冲出)
寻(寻找)(寻人)(寻求)
姑(姑娘)(姑姑)(姑妈)
娘(新娘)(大娘)(娘家)
吐(吞吐)(吐丝)(扬眉吐气)
柳(柳枝)(柳树)(杨柳)
荡(回荡)(飘荡)(荡秋千)
桃(桃花)(桃李)(桃树)
杏(杏花)(杏子)(杏树)
仔(仔细)(仔鸡)(牛仔)
春天
野花
秋千`,

        '课文3《开满鲜花的小路》':
            `鲜(鲜花)(新鲜)(鲜红)
递(传递)(快递)(邮递)
原(原来)(草原)(高原)
局(邮局)(局长)(出局)
礼(礼物)(礼品)(队礼)
邮(邮递员)(邮票)(邮件)
员(队员)(员工)(学员)
叔(大叔)(叔叔)(叔父)
堆(土堆)(沙堆)(堆放)
认(认为)(认字)(认真)
先生
太太
做客
惊奇
快活`,

        '课文4《邓小平爷爷植树》':
            `注(注意)(关注)(注入)
植(植树)(植物)(种植)
格(格外)(格子)(方格)
引(引人注目)(引用)(引号)
满(满意)(满分)(满足)
休(休息)(休学)(休想)
息(气息)(信息)(出息)
爷爷
万里无云
公园
汗珠
树苗
小心
笔直`,

        '课文5《雷锋叔叔,你在哪里》':
            `锋(锋利)(前锋)(先锋)
昨(昨天)(昨日)(昨晚)
冒(感冒)(冒号)(冒险)
留(留下)(留学)(收留)
弯(弯腰)(转弯)(弯曲)
背(背包)(背负)(背后)
洒(洒水)(泼洒)(洒落)
温(温暖)(温和)(体温)
暖(暖和)(暖洋洋)(暖风)
叔叔
足迹
迷路
春风
爱心`,

        '课文6《千人糕》':
            `能(可能)(能力)(能干)
味(味道)(香味)(回味)
具(工具)(具体)(家具)
甜(甜菜)(甜美)(香甜)
劳(劳动)(辛劳)(劳工)
桌(桌子)(书桌)(课桌)
买(买卖)(买书)(收买)
甘(甘甜)(甘草)(甘心)
菜(种菜)(青菜)(白菜)
也许
平时
难道
就是
加工
种子
经过`,

        '课文7《一匹出色的马》':
            `匹(马匹)(布匹)(匹敌)
波(波纹)(水波)(风波)
像(好像)(头像)(画像)
恋(恋恋不舍)(爱恋)(依恋)
求(要求)(请求)(求助)
妹(妹妹)(姐妹)(兄妹)
纹(花纹)(条纹)(指纹)
景(景色)(风景)(美景)
舍(舍得)(舍命)(舍己为人)
出色
河水
碧绿
河岸
柳叶
非常
柳树
枝条
高兴`,

        '识字1《神州谣》':
            `州(神州)(九州)(广州)
华(中华)(华丽)(华山)
岛(台湾岛)(海岛)(小岛)
各(各自)(各种)(各有千秋)
民(人民)(农民)(公民)
族(民族)(汉族)(家族)
谊(情谊)(发谊)(深情厚谊)
齐(看齐)(对齐)(齐全)
奋(奋发)(兴奋)(奋斗)
山川
黄河
长江`,

        '识字2《传统节日》':
            `贴(贴心)(体贴)(张贴)
街(街道)(沿街)(街灯)
舟(龙舟)(渔舟)(轻舟)
艾(艾草)(艾灸)(艾香)
敬(敬爱)(敬礼)(敬意)
转(转眼)(转身)(转动)
闹(热闹)(打闹)(闹钟)
节日
春节
花灯
清明节
先人
中秋`,

        '识字3《"贝"的故事》':
            `贝(宝贝)(分贝)(干贝)
壳(贝壳)(蛋壳)(外壳)
甲(甲骨文)(甲鱼)(甲虫)
骨(骨头)(骨气)(龙骨)
钱(钱包)(纸钱)(工钱)
币(钱币)(纸币)(外币)
财(钱财)(财主)(财宝)
关(有关)(开关)(关心)
与(与其)(与众不同)(参与)
动物
自己
身体
样子
可以
比如`,

        '识字4《中国美食》':
            `烧(红烧)(烧水)(发烧)
茄(茄子)(番茄)(雪茄)
烤(烤鸭)(烧烤)(烤火)
鸭(鸭子)(鸭蛋)(小鸭)
肉(羊肉)(牛肉)(鱼肉
鸡(鸡肉)(公鸡)(母鸡)
蛋(鸡蛋)(鸟蛋)(蛋黄)
炒(蛋炒饭)(炒菜)(炒面)
饭(吃饭)(米饭)(早饭)
美食`,

        '课文8《彩色的梦》':
            `彩(彩色)(彩笔)(精彩)
森(森林)(阴森)(森严)
结(结实)(结巴)(总结)
般(一般)(百般)(般配)
灵(机灵)(灵活)(心灵)
梦(做梦)(美梦)(梦乡)
拉(拉开)(拉面)(拉力)
苹(苹果)(苹果树)(苹婆)
精(精灵)(精美)(精明)
脚尖
雪松
歌声
季节`,

        '课文9《枫树上的喜鹊》':
            `伞(雨伞)(打伞)(跳伞)教(教学)(教书)(教室)
姨(阿姨)(姨妈)(小姨)
弟(弟弟)(兄弟)(表弟)
便(方便)(便衣)(便宜)
游(游戏)(游泳)(游山玩水)
戏(京戏)(唱戏)(看戏)
母(字母)(母亲)(母子)
好像
一直
说话
童话
称呼
对岸
发现
发明`,

        '课文10《沙滩上的童话》':
            `周(周围)(四周)(周到)
围(围市)(包围)(外围)
补(补丁)(补助)(亡羊补牢)
充(补充)(充足)(充分)
药(火药)(中药)(山药)
合(合力)(合作)(合并)
死(死亡)(生死)(死因)
记(意记)(旧记)(记忆)
公主
伙伴
飞机
地道`,

        '课文11《我是一只小虫子》':
            `屁(放屁)(屁话)(马屁)
股(屁股)(股票)(股份)
总(总是)(总共)(总而言之)
净(干净)(清净)(净土)
婶(婶婶)(大婶)(婶娘)
幸(幸运)(不幸)(幸会)
使(使用)(天使)(使命)
劲(使劲)((劲头)(干劲)
苍耳
留神
只是
从来
快乐
夜晚
听见
草地`,

        '课文12《寓言二则》':
            `亡(亡羊补牢)(死亡)(灭亡)
钻(钻研)(钻进)(钻石)
牢(牢记)(牢固)(牢房)
劝((劝告)(劝说)(劝阻)
丢(丢失)(丢人)(丢脸)
告(告诉)(告别)(报告)
筋(面筋)(脑筋)(筋疲力尽)
疲(疲劳)(疲倦)(疲惫)
禾苗
明白`,

        '课文13《画杨桃》':
            `图(图画)(图书)(图形)
课(上课)(课堂)(讲课)
摆(摆放)(摆动)(钟摆)
座(座位)(星座)(讲座)
交(交往)(交情)(成交)
哈(哈哈大笑)(哈气)(笑哈哈)
页(页面)(书页)(页码)
抢(争抢)(抢占)(抢先)
嘻(嘻笑)(嘻戏)(笑嘻嘻)
室(教室)(课室)(办公室)
老师
讲桌
同学
五角星
然后
画纸
神情
角度`,

        '课文14《小马过河》':
            `愿(愿意)(心愿)(愿望)
意(心意)(同意)(意见)
麦(麦子)(麦苗)(麦芽)
该(应该)(该死)(活该)
伯(伯伯)(大伯)(伯父)
刻(立刻)(刻苦)(时刻)
突(突然)(突出)(冲突)
掉(扔掉)(掉队)(掉头)
为难
四周
吃惊
认真
脚步
难为情`,

        '课文15《古诗二首》':
            `湖(湖水)(江湖)(西湖)
穷(无穷)(穷人)(贫穷)
绝(绝句)(绝对)(绝交)
岭(山岭)(岭南)(翻山越岭)
莲(莲花)(莲子)(莲叶)
荷(荷花)(荷叶)(荷包)
含(包含)(含义)(含笑)
吴(吴国)(东吴)(吴音)`,

        '课文16《雷雨》':
            `雷(雷雨)(打雷)(雷电)
乌(乌云)(乌黑)(乌龟)
黑(黑色)(黑夜)(黑人)
压(气压)(电压)(压力)
垂(垂直)(垂柳)(垂青)
户(窗户)(户口)(家家户户)
迎(迎面)(欢迎)(迎接)
扑(扑闪)(扑灭)(红扑扑)
新(清新)(新年)(新鲜)
闪电
雷声
房子`,

        '课文17《要是你在野外迷了路》':
            `指(指点)(手指)(指甲)
针(指南针)(打针)(时针)
帮(帮忙)(帮手)(互帮互助)
助(帮助)(助手)(自助)
导(向导)(指导)(引导)
永(永远)(永别)(永久)
碰(碰面)(碰见)(碰头)
特(特别)(特点)(奇特)
积(积雪)(积极)(面积)
野外
大自然
天然
方向
时候
北极星
黑夜`,

        '课文18《太空生活趣事多》':
            `杯(杯子)(水杯)(干杯)
失(失去)(丢失)(失明)
洗(地板)(木板)(黑板)
澡(洗澡)(澡堂)(澡盆)
容(容易)(宽容)(内容)
易(交易)(轻易)(平易近人)
浴(浴桶)(浴室)(浴巾)
桶(水桶)(木桶)(马桶)
太空
生活
别处
活动
主要
方便
喝水
使用`,

        '课文19《大象的耳朵》':
            `扇(扇子)(风扇)(电扇)
慢(慢慢)(慢走)(缓慢)
遇(遇到)(遇见)(奇遇)
兔(兔子)(白兔)(玉兔)
安(不安)(安全)(安心)
根(树根)(根本)(根据)
痛(头痛)(痛苦)(痛心)
最(最后)(最多)(最小)
大象
耳朵
毛病
后来
不安
人家`,

        '课文20《蜘蛛开店》':
            `店(商店)(店面)(店员)
决(决定)(决心)(坚决)
定(一定)(立定)(安定)
商(商品)(商量)(商人)
夫(工夫)(夫人)(农夫)
终(终于)(最终)(终点)
完(完成)(完美)(完工)
换(交换)(对换)(变换)
期(星期)(日期)(期望)
围巾`,

        '课文21《青蛙卖泥塘》':
            `蛙(青蛙)(牛蛙)(蛙泳)
卖(买卖)(外卖)(出卖)
搬(搬家)(搬运)(搬弄)
倒(倒车)(倒影)(倒立)
籽(草籽)(菜籽)(棉籽)
泉(泉水)(温泉)(清泉)
破(破坏)(破产)(冲破)
应(应该)(应当)(应有尽有)
野鸭
竹子
花丛
尽情
道路`,

        '课文22《小毛虫》':
            `整(整齐)(工整)(整洁)
纺(纺织)(纺车)(纺丝)
编(编织)(编号)(编写)
布(布匹)(公布)(分布)
抽(抽水)(抽象)(抽奖)
织(交织)(组织)(织机)
怎(怎样)(怎么)(怎么样)
消(消失)(消灭)(消息)
毛虫
叶子
目光
周游
声音
色彩
花纹`,

        '课文23《祖先的摇篮》':
            `祖(祖先)(祖国)(祖父)
啊(好啊)(走啊)(天啊)
浓(浓绿)(浓度)(浓眉大眼)
望(失望)(愿望)(希望)
蓝(蓝天)(蓝色)(蔚蓝)
摘(摘花)(采摘)(摘要)
掏(掏空)(掏包)(掏出)
忆(回忆)(记忆)(失忆)
赛(赛跑)(比赛)(赛车)
原始
意思
一望无边
野果
野兔`,

        '课文24《羿射九日》':
            `觉(觉得)(自觉)(直觉)
值(值日)(值班)(值得)
类(人类)(种类)(分类)
艰(艰难)(艰苦)(艰巨)
弓(弹弓)(开弓)(弓步)
害(害怕)(害虫)(伤害)
此(从此)(因此)(此时)
炎(炎热)(发炎)(消炎)
光明
决心
苦海
花草树木
生机`,

        '课文25《黄帝的传说》':
            `帝(帝王)(上帝)(帝国)
传(传说)(传奇)自传)
忽(忽然)(忽闪)(忽视)
启(启发)(开启)(启动)
由(自由)(由于)(身不由己)
段(片段)(手段)(身段)
理(道理)(理想)(心安理得)
通(交通)(通知)(通过)
首领
步行
搬运
根本
发展
便利`
    }



    let isPaused = false;
    let isStopped = false;
    let currentUtterance = null;
    let wordList = [];
    let index = 0;
    let repeatCount = 0;
    CONTENT = document.getElementById('content').value;
    REPEAT = parseInt(document.getElementById('repeat').value);
    SLEEP = parseInt(document.getElementById('sleep').value);

    document.getElementById('startBtn').addEventListener('click', startDictation);
    document.getElementById('pauseBtn').addEventListener('click', pauseDictation);
    document.getElementById('resumeBtn').addEventListener('click', resumeDictation);
    document.getElementById('stopBtn').addEventListener('click', stopDictation);
    // 获取input元素的引用
    var inputElement_repeat = document.getElementById('repeat');
    // 为input元素添加事件监听器
    inputElement_repeat.addEventListener('input', function() {
        // 获取输入框的当前值，并将其转换为数字（如果可能）
        REPEAT = parseInt(this.value);
    });
    // 获取input元素的引用
    var inputElement_sleep = document.getElementById('sleep');
    // 为input元素添加事件监听器
    inputElement_sleep.addEventListener('input', function() {
        // 获取输入框的当前值，并将其转换为数字（如果可能）
        SLEEP = parseInt(this.value);
    });
    // 假设你有一个select元素
    var selectElement = document.getElementById('textno');

    // 清空select元素中的选项（如果已存在）
    while (selectElement.firstChild) {
        selectElement.removeChild(selectElement.firstChild);
    }
    for (let key in ALLTEXT) {
        if (ALLTEXT.hasOwnProperty(key)) {
            let option = document.createElement('option');
            option.value = key; // 设置option的value为对象的key
            option.text = key; // 设置option的文本为对象的值
            selectElement.appendChild(option); // 将option添加到select元素中
        }
    }
    // 添加change事件监听器
    selectElement.addEventListener('change', function(event) {
        // event.target 是触发事件的元素（即<select>）
        // event.target.value 是被选中的<option>的value属性
        let selectedValue = event.target.value;
        // let selectedText = event.target.options[event.target.selectedIndex].text;
// 获取textarea元素
        let textarea = document.getElementById('content');

// 清空textarea的内容
        textarea.value = ''; // 或者使用 textarea.textContent = ''; 或 textarea.innerHTML = '';

// 重新给textarea赋值
        textarea.value = ALLTEXT[selectedValue]; // 赋值新的字符串

    });

    let changeEvent = new Event('change', { bubbles: true });
    selectElement.dispatchEvent(changeEvent);

    function startDictation() {
        isPaused = false;
        isStopped = false;
        document.getElementById('startBtn').disabled = true;
        document.getElementById('pauseBtn').disabled = false;
        document.getElementById('stopBtn').disabled = false;

        const content = document.getElementById('content').value;
        const repeat = parseInt(document.getElementById('repeat').value);
        const sleep = parseInt(document.getElementById('sleep').value);
        wordList = getWordList(content);

        const resultDiv = document.getElementById('result');
        resultDiv.textContent = '';

        index = 0;
        repeatCount = 0;
        shuffleArray(wordList);

        speakNextWord(resultDiv);
    }

    function speakNextWord(resultDiv) {
        if(isPaused){
            setTimeout(() => speakNextWord(resultDiv), 300);
            return
        }
        if (isStopped || index >= wordList.length) {
            document.getElementById('startBtn').disabled = false;
            document.getElementById('pauseBtn').disabled = true;
            document.getElementById('resumeBtn').disabled = true;
            document.getElementById('stopBtn').disabled = true;
            if(index >=wordList.length){
                currentUtterance = new SpeechSynthesisUtterance("太棒了，听写完成！");
                currentUtterance.lang = 'zh-CN';
                currentUtterance.rate = 0.9;
                window.speechSynthesis.speak(currentUtterance);
                currentUtterance.onend = () => {
                    window.speechSynthesis.cancel();
                };
            }
            if(isStopped) {
                window.speechSynthesis.cancel();
            }
            return;
        }

        const word = wordList[index];
        let utteranceText = `第${index + 1}个：${word}`;

        currentUtterance = new SpeechSynthesisUtterance(utteranceText);
        currentUtterance.lang = 'zh-CN';
        currentUtterance.rate = 0.9;

        currentUtterance.onend = () => {
            if( !isStopped) {
                repeatCount++;
                if (repeatCount >= REPEAT) {
                    repeatCount = 0;
                    index++;
                }
                setTimeout(() => speakNextWord(resultDiv), SLEEP * 1000);
            }
        };

        if (repeatCount === 0) {
            resultDiv.textContent += `${index + 1}. ${word.replace("。", "，")}\n`;
        }

        window.speechSynthesis.cancel();
        window.speechSynthesis.speak(currentUtterance);
    }

    function pauseDictation() {
        isPaused = true;
        document.getElementById('pauseBtn').disabled = true;
        document.getElementById('resumeBtn').disabled = false;
        window.speechSynthesis.pause();
    }

    function resumeDictation() {
        isPaused = false;
        document.getElementById('pauseBtn').disabled = false;
        document.getElementById('resumeBtn').disabled = true;
        window.speechSynthesis.resume();
    }

    function stopDictation() {
        isStopped = true;
        document.getElementById('pauseBtn').disabled = true;
        document.getElementById('resumeBtn').disabled = true;
        document.getElementById('stopBtn').disabled = true;
        document.getElementById('startBtn').disabled = false;
        window.speechSynthesis.cancel();
    }

    function getWordList(text) {
        return text.split('\n').map(line => extractFirstCharAndBrackets(line.trim())).filter(Boolean);
    }

    function extractFirstCharAndBrackets(s) {
        s = s.replace('（', '(').replace('）', ')');
        const match = s.match(/^(.)(\(.*?\))+/);
        if (match) {
            const firstChar = match[1];
            const brackets = s.match(/\(.*?\)/g);
            const bracketsWithoutParens = brackets.map(x => x.slice(1, -1).trim());
            bracketsWithoutParens.sort(() => Math.random() - 0.5);
            return `${firstChar}。${bracketsWithoutParens[0]}`;
        }
        return s;
    }

    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    }

</script>
</body>
</html>
